<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getAll</title>
		<script src="jquery-3.6.0.js"></script>
		<link href="getAll.css" rel="stylesheet"/>
		<script>
			function updateThis(obj2){
				// alert("Yes")
				let id = obj2.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML;
				let name = prompt("name");
				let age = prompt("age");
				let sex = prompt("sex");
				var user = {
					"id" : id,
					"name" : name,
					"age" : age,
					"sex" : sex
				}
				console.log(obj2.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML);
				$.ajax({
					type : 'get',
					url: 'http://localhost:8090/user/update',
					data: user,
					dataType : 'json',
					success : function(data){
						var str = "";
						for(x of data){
							$("#inser").append(
							`<tr>
								<td>${x.id}</td>
								<td>${x.name}</td>
								<td>${x.age}</td>
								<td>${x.sex}</td>
								<td><Input type='button' value='修改' onclick='updateThis(this)'/><Input type='button' value='删除' onclick='deleteThis(this)'/> </td>
							</tr>`
							);
						}
						location.reload();
					},
					error : function() {
						console.log("无法与数据库取得连接!!!");
						}
				})
			}
			function deleteThis(obj){
				// alert("Yes")
				let id = obj.parentNode.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML;
				console.log(id);
				$.ajax({
					type : 'get',
					url: 'http://localhost:8090/user/delete',
					dataType : 'json',
					data : {'id':id},
					success : function(data){
						var str = "";
						for(x of data){
							$("#inser").append(
							`<tr>
								<td>${x.id}</td>
								<td>${x.name}</td>
								<td>${x.age}</td>
								<td>${x.sex}</td>
								<td><Input type='button' value='修改' onclick='updateThis(this)'/><Input type='button' value='删除' onclick='deleteThis(this)'/> </td>
							</tr>`
							);
						}
						location.reload();
					},
					error : function() {
						console.log("无法与数据库取得连接!!!");
						}
				})
			}
			$(function(){
				
				$.ajax({
					type : 'get',
					url: 'http://localhost:8090/user/getAll',
					dataType : 'json',
					success : function(data){
						// console.log(data)
						let str = "";
						// for(var i = 0; i < data.length; i++){
						// 	str += "<tr><td>" + data[i].id + "</td><td>" + data[i].name
						//          + "</td><td>" + data[i].age + "</td><td>" + data[i].sex
						//          + "</td></tr>";
						// }
						// for(x in data){
						// 	str += "<tr><td>" + data[x].id + "</td><td>" + data[x].name
						// 	+ "</td><td>" + data[x].age + "</td><td>" + data[x].sex
						// 	+ "</td></tr>";
						// }
						// for(x of data){
						// 	str += "<tr><td>" + x.id + "</td><td>" + x.name
						// 	+ "</td><td>" + x.age + "</td><td>" + x.sex
						// 	+ "</td></tr>";
						// }
						// for(x of data){
						// 	str += `<tr><td>${x.id}</td><td>${x.name}</td><td>${x.age}</td><td>${x.sex}</td></tr>`
						// }
						// $("#inser").append(str);
						for(x of data){
							$("#inser").append(
							`<tr>
								<td>${x.id}</td>
								<td>${x.name}</td>
								<td>${x.age}</td>
								<td>${x.sex}</td>
								<td><Input type='button' value='修改' onclick='updateThis(this)'/><Input type='button' value='删除' onclick='deleteThis(this)'/> </td>
							</tr>`
							);
						}
					},
					error : function() {
						console.log("无法与数据库取得连接!!!");
						},
				});
			})
		</script>
	</head>
	<body>
		<table border="1px" width="50%" align="center" id="inser">
			<caption>用户列表</caption>
			<th>id</th><th>name</th><th>age</th><th>sex</th><th>操作</th>
			<!-- <tr id="inser"></tr> -->
		</table>
	</body>
</html>
